<template>
  <view class="myWallet">
    <topTitle title="餘額變動明細" />

    <view class="com">
      <up-tabs :list="list" :scrollable="false" @click="tabFn"></up-tabs>
      <view class="recordList">
        <view class="userOrderList">
          <view v-for="(item, idx) in UserOrderList" :key="idx">
            <view>
              <view>{{ orderIdFilter(item.order_id) }}</view>
              <view
                >{{ item.after_money > item.before_money ? "+" : "-"
                }}{{ item.money }}</view
              >
            </view>
            <view>
              <view>{{ formattingTime(item.add_time, 0) }}</view>
              <view>餘額 {{ item.after_money }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { UserOrder, OrderType } from "@/api/UserApi";
import { onReachBottom } from "@dcloudio/uni-app";

const list = reactive([
  { name: "全部", income: null },
  { name: "收入", income: true },
  { name: "支出", income: false },
]);

let select_time: any = null;
let UserOrderList = ref<Array<any>>([]);
let OrderTypeList = ref<Array<any>>([]);

const OrderTypeFn = async () => {
  OrderTypeList.value = await OrderType();
};
let paramete = ref<any>({});

const tabFn = async (item: any) => {
  select_time = null;
  paramete.value = item;
  UserOrderFn();
};

const UserOrderFn = async () => {
  let list = await UserOrder({
    select_time,
    income: paramete.value?.income,
    order_id: null,
  });
  if (!select_time) {
    UserOrderList.value = list;
  } else {
    UserOrderList.value = [...UserOrderList.value, ...list];
  }
};
const orderIdFilter = (order_id: number) => {
  let item = OrderTypeList.value.filter((e) => e.order_id == order_id);
  if (!item.length) {
    return;
  }
  return item[0].order_name;
};

UserOrderFn();
OrderTypeFn();

onReachBottom(() => {
  select_time = UserOrderList.value[UserOrderList.value.length - 1].add_time;
  UserOrderFn();
});
</script>
<style scoped lang="scss">
@import "../../static/scss/myWallet.scss";
</style>
